<template>
	<view class="order">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<u-navbar :back-text="title" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" :title="title" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<!-- end -->
		<view class="shop">
			<view class="shop_name" style="padding:12rpx 32rpx;">
				<image src="../../static/icon/logo.png" mode=""></image>
				<view>必到家政</view>
			</view>
			<view class="line"></view>

			<view class="allorder">
				<view class="orders">
					<view><image :src="employee.portrait" mode="" class="order_img"></image></view>
					<view class="person">
						<view class="usern">
							{{ employee.name }}
							<view class="richeng">
								<view style="" @click="schedule(employee.employeeId)">查看她的日程</view>
								<image src="../../static/icon/youj.png" mode=""></image>
							</view>
						</view>
						<view class="fenshu">
							<view class="rates">{{ employee.score }}分</view>
							<view><u-rate active-color="#F29423" :current="employee.score" :disabled="true"></u-rate></view>
						</view>
						<view class="style">
							<text>{{ employee.age }}岁</text>
							<text class="pad">{{ employee.nativePlace }}人</text>
							<text class="pad">服务{{ employee.workYear }}年</text>
							<text class="pad">{{ employee.education }}学历</text>
						</view>
						<view class="goodAt">
							<view class="leis" v-for="(item, index) in goodAtList" :key="index">{{ item }}</view>
						</view>
						<view style="float: right;font-size: 30rpx;color: #F29423;">{{ employee.univalence }}{{ employee.univalenceUnit }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_name">
				<view class="lei">签约时间：</view>
				<view class="foot_style" style="display: flex;align-items: center;">
					<u-select v-model="show" :list="list" confirm-color="#FCC800" @confirm="confirm"></u-select>
					<view class="" @click="signingTime" style="padding-right: 20rpx;">{{ month }}个月</view>
					<image v-show="this.redirectType == 5" @click="signingTime" src="../../static/icon/jian.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
				</view>
			</view>

			<view class="foot_name" v-if="redirectType != 5">
				<view class="lei">试岗开始时间：</view>
				<view class="foot_style">{{ probationStart }}</view>
			</view>
			<view class="foot_name" v-if="redirectType != 5">
				<view class="lei">试岗结束时间：</view>
				<view class="foot_style">{{ probationEnd }}</view>
			</view>

			<view class="foot_name" v-if="redirectType != 5">
				<view class="lei">签约日期：</view>
				<view class="foot_style">{{ signDate }}</view>
			</view>

			<view class="foot_name" v-if="redirectType == 5">
				<view class="lei">开始时间：</view>
				<view class="foot_style" style="display: flex;align-items: center;">
					<u-picker mode="time" v-model="isshow" :params="params" :start-year="2021" @confirm="confirms"></u-picker>
					<view class="" @click="isshow = true" style="padding-right: 20rpx;">{{ result }}</view>
					<image @click="isshow = true" src="../../static/icon/jian.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
				</view>
			</view>
			<view class="foot_name" v-if="redirectType == 5">
				<view class="lei">结束时间：</view>
				<view class="foot_style">{{ results }}</view>
			</view>
			<view class="foot_name" v-if="redirectType != 5">
				<view class="lei">已缴纳定金：</view>
				<view class="foot_style" style="color: #FCA800;">{{ prepaidPrice }}元</view>
			</view>
			<view class="foot_name">
				<view class="lei">签约总价格：</view>
				<view class="foot_style" style="color: #FCA800;">{{ price }}元</view>
			</view>
			<view class="foot_name" @tap="jump_youhui(orderId, orderStatus, abc)">
				<view class="lei">
					优惠券折扣:
					<text style="margin-left: 15rpx;">{{ couponPrice }}</text>
				</view>
				<!--  -->
				<view v-if="haveCommit != 1" class="foot_style" style="padding-right: 8rpx;">
					<u-icon name="arrow-right" color="#cccccc" size="30"></u-icon>
				</view>
			</view>
			<view class="foot_name">
				<view class="lei">
					余额折扣:
					<text style="margin-left: 15rpx;">{{ usedBalances }}</text>
				</view>
				<view class="foot_style">
					<!-- v-if="details.haveCommit!=1" -->
					<label style="font-size:28upx;text-align: center;">
						<radio @click="radioChange" style="transform: scale(0.7);" color="#FFC000" value="r1" :checked="check" v-if="haveCommit != 1" />
					</label>
				</view>
			</view>
			<view class="foot_name">
				<view class="lei">保险价格：</view>
				<view class="foot_style">平台赠送</view>
			</view>
			<view class="foot_name" style="margin-bottom: 100rpx;">
				<view class="lei">服务地址：</view>
				<view class="feet">
					<view @click="jumpToAddress()">{{ address.province }} {{ address.city }} {{ address.region }} {{ address.address }}</view>
					<image @click="jumpToAddress()" src="../../static/icon/jian.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="foot_mon">
				<view class="write" v-if="redirectType != 5">
					定金抵扣后，您还需要支付
					<text>{{ balancePrice }}</text>
					元
				</view>
				<view><u-button type="warning" shape="circle" @click="qianyue()">立即签约</u-button></view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			is_click: true,
			background: {
				backgroundColor: '#fca800'
			},
			title: '在线签约',
			show: false,
			list: [
				{
					label: '1'
				},
				{
					label: '2'
				},
				{
					label: '3'
				},
				{
					label: '4'
				},
				{
					label: '5'
				},
				{
					label: '6'
				},
				{
					label: '7'
				},
				{
					label: '8'
				},
				{
					label: '9'
				},
				{
					label: '10'
				},
				{
					label: '11'
				},
				{
					label: '12'
				}
			],
			goodAtList: [],
			orderId: '',
			monthCount: '',
			signDate: '',
			balancePrice: '',
			probationStart: '',
			probationEnd: '',
			employee: '',
			prepaid: '',
			price: '',
			prepaidPrice: '',
			redirectType: '',
			month: '1',
			params: {
				year: true,
				month: true,
				day: true
			},
			isshow: false,
			result: '',
			results: '',

			address: {
				province: '',
				city: '',
				region: '',
				address: '',
				addressId: ''
			},
			haveCommit: '',
			couponPrice: '',
			usedBalances: '',
			check: false,
			abc: '',
			quanid: ''
		};
	},
	onLoad(option) {
		that = this;
		if (option.quan_id) {
			this.quanid = option.quan_id;
		}
		this.orderId = option.orderId;
		if (option.month) {
			this.month = option.month;
		}
		if (option.result) {
			this.result = option.result;
		}
		this.redirectType = option.redirectType;
	},
	onShow() {
		console.log(this.quanid);
		if (this.redirectType == 5) {
			this.getXuDetail();
			this.getDatas();
			this.getMonth();
			this.title = '在线续约';
		} else {
			this.getSignDetail();
			this.title = '在线签约';
		}
		that.is_click = true;
	},

	methods: {
		// 优惠券跳转 1是续约
		jump_youhui(id, orderStatus, abc) {
			uni.navigateTo({
				url: 'yhquan?id=' + id + '&orderStatus=' + orderStatus + '&abc=' + abc + '&type=1' + '&month=' + this.month + '&result=' + this.result
			});
		},
		// 余额折扣选择
		radioChange() {
			this.check = !this.check;
			if (this.check == true) {
				this.useBalanceFlagflag = 1;
			} else {
				this.useBalanceFlagflag = 0;
			}
			this.getSignDetail();
		},
		jumpToAddress: function() {
			uni.navigateTo({
				url: '../personal/address?type=1'
			});
		},
		signingTime: function() {
			console.log(this.redirectType);
			if (this.redirectType == 5) {
				this.show = true;
			} else {
				this.show = false;
			}
		},
		confirm(e) {
			var _this = this;
			console.log(e);
			if (_this.haveCommit == 0) {
				_this.month = e[0].label;
				_this.getMonth();
			} else {
				this.$refs.uToast.show({
					title: '订单已提交，不能更改该信息',
					type: 'default'
				});
			}
		},
		confirms(e) {
			var _this = this;
			console.log(e);
			if (_this.haveCommit == 0) {
				_this.result = e.year + '-' + e.month + '-' + e.day;
				_this.getMonth();
			} else {
				this.$refs.uToast.show({
					title: '订单已提交，不能更改该信息',
					type: 'default'
				});
			}
		},
		getDatas() {
			var arr = [];
			var _this = this;
			var date = new Date();
			var year = date.getFullYear();
			var mon = date.getMonth() + 1;
			var day = date.getDate();
			if (mon <= 9) {
				//如果小于9的话，则需要加上0
				mon = '0' + mon;
			} //getdate()返回的是1-31，则不需要加1
			if (day <= 9) {
				//如果小于9的话，则需要加上0
				day = '0' + day;
			}
			var showDate = year + '-' + mon + '-' + day;
			_this.result = showDate;
		},
		getMonth() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/month'
			};
			let data = {
				startDate: _this.result,
				monthCount: _this.month
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					_this.results = res.data;
					if (_this.redirectType == 5) {
						_this.getXuDetail();
					} else {
						_this.getSignDetail();
					}
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},

		getXuDetail() {
			let _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/reSign/info'
			};
			let data = {
				orderId: _this.orderId,
				monthCount: _this.month,
				startDate: _this.result,
				couponsId: null
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					console.log(res, '续约');
					var couponsList = res.data.couponsList;
					console.log(_this.couponsList, '===');
					var a = JSON.stringify(couponsList);
					this.abc = a;
					// var b = JSON.parse(a)

					_this.employee = res.data.employeeInfo;
					_this.goodAtList = res.data.employeeInfo.skills;
					_this.monthCount = res.data.monthCount;
					_this.prepaid = res.data.prepaid;
					_this.entName = res.data.entName;
					_this.probationStart = res.data.startDate;
					_this.probationEnd = res.data.endDate;
					_this.signDate = res.data.signDate;
					_this.balancePrice = res.data.balancePrice;
					_this.price = res.data.price;
					_this.prepaidPrice = res.data.prepaidPrice;
					_this.address = {};
					_this.address.province = res.data.province;
					_this.address.region = res.data.region;
					_this.address.city = res.data.city;
					_this.address.address = res.data.address;
					_this.haveCommit = 0;
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		getSignDetail() {
			let _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/sign/info'
			};
			let data = {
				orderId: _this.orderId,
				useBalanceFlag: _this.useBalanceFlagflag,
				couponsId: _this.quanid,
				monthCount: _this.month,
				addressId: _this.address.addressId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					var couponsList = res.data.couponsList;
					var a = JSON.stringify(couponsList);
					_this.abc = a;
					_this.couponPrice = res.data.couponPrice;
					_this.usedBalances = res.data.usedBalances;
					_this.employee = res.data.employeeInfo;
					_this.goodAtList = res.data.employeeInfo.skills;
					_this.monthCount = res.data.monthCount;
					_this.prepaid = res.data.prepaid;
					_this.address = res.data.addressInfo;
					_this.entName = res.data.entName;
					_this.probationStart = res.data.probationStart;
					_this.probationEnd = res.data.probationEnd;
					_this.signDate = res.data.signDate;
					_this.balancePrice = res.data.balancePrice;
					_this.price = res.data.price;
					_this.prepaidPrice = res.data.prepaidPrice;
					_this.result = res.data.probationStart;
					_this.haveCommit = res.data.haveCommit;
					_this.address = {};
					_this.address.province = res.data.province;
					_this.address.region = res.data.region;
					_this.address.city = res.data.city;
					_this.address.address = res.data.address;
					_this.address.addressId = res.data.addressId;
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		schedule(employeeId) {
			uni.navigateTo({
				url: '../home/herSchedule/herSchedule?employeeId=' + employeeId
			});
		},
		//推送
		ts() {
			uni.requestSubscribeMessage({
				tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
				success(res) {},
				fail(err) {}
			});
		},
		qianyue() {
			if (that.is_click == true) {
				that.is_click = false;
				// that.ts()
				let _this = this;
				if (this.redirectType == 5) {
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'orders/reSign/pay'
					};
					let data = {
						orderId: _this.orderId,
						monthCount: _this.month,
						startDate: _this.result,
						useBalanceFlag: _this.useBalanceFlagflag,
						couponsId: _this.quanid,
						addressId: _this.address.addressId
					};
					_this.http.httpTokenRequest(opts, data).then(res => {
						if (res.code == 200) {
							var needstr = res.data;
							uni.requestSubscribeMessage({
								tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
								success(res) {
									if (needstr.needPay == 0) {
										uni.redirectTo({
											url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
										});
									} else {
										_this.wxpay(needstr.vxPayData);
									}
								},
								fail(err) {
									if (needstr.needPay == 0) {
										uni.redirectTo({
											url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
										});
									} else {
										_this.wxpay(needstr.vxPayData);
									}
								}
							});
						} else if (res.code == '1082') {
							that.is_click = true;
							this.$refs.uToast.show({
								title: '该员工已被签约，请签约其他员工！',
								type: 'info'
							});
						} else {
							that.is_click = true;
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							});
						}
					});
				} else {
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'orders/pay/sign'
					};
					let data = {
						orderId: _this.orderId,
						monthCount: _this.month,
						startDate: _this.result,
						useBalanceFlag: _this.useBalanceFlagflag,
						couponsId: _this.quanid,
						addressId: _this.address.addressId
						// orderId: _this.orderId,
						// monthCount: _this.month,
						// couponsId: 0,
						// addressId:_this.address.addressId
					};
					_this.http.httpTokenRequest(opts, data).then(res => {
						if (res.code == 200) {
							var needstr = res.data;
							uni.requestSubscribeMessage({
								tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
								success(res) {
									if (needstr.needPay == 0) {
										// uni.navigateTo({
										// 	url: './paySucess?type=1' + '&orderId=' + _this.orderId
										// })
										uni.redirectTo({
											url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
										});
									} else {
										_this.wxpay(needstr.vxPayData);
									}
								},
								fail(err) {
									if (needstr.needPay == 0) {
										// uni.navigateTo({
										// 	url: './paySucess?type=1' + '&orderId=' + _this.orderId
										// })
										uni.redirectTo({
											url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
										});
									} else {
										_this.wxpay(needstr.vxPayData);
									}
								}
							});
						} else if (res.code == '1082') {
							that.is_click = true;
							this.$refs.uToast.show({
								title: '该员工已被签约，请签约其他员工！',
								type: 'info'
							});
						} else {
							that.is_click = true;
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							});
						}
					});
				}
			} else {
				// uni.showToast({
				// 	title:'请不要频繁操作',
				// 	icon:'none'
				// })
			}
		},
		wxpay(str) {
			let _this = this;
			let query = str;
			uni.requestPayment({
				provider: 'wxpay',
				appId: query.appId,
				timeStamp: query.timeStamp + '',
				nonceStr: query.nonceStr,
				package: query.package,
				signType: query.signType,
				paySign: query.sign,
				success: res => {
					console.log(res.data);
					setTimeout(function() {
						uni.redirectTo({
							url: './monthlyPay?orderId=' + _this.orderId + '&type=' + 1
						});
					}, 1000);
				},
				fail: val => {
					if (_this.redirectType == 5) {
						_this.getXuDetail();
						_this.getDatas();
						_this.getMonth();
						_this.title = '在线续约';
					} else {
						_this.getSignDetail();
						_this.title = '在线签约';
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
/* 导航 */
.shop {
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	margin: 36rpx 28rpx 0 26rpx;
}

.shop_name {
	display: flex;
	align-items: center;
}

.shop_name image {
	width: 52rpx;
	height: 64rpx;
}

.line {
	border: 2rpx solid #e4e4e4;
}

.allorder {
	padding: 6rpx 14rpx 12rpx 22rpx;
}

.orders {
	display: flex;
}

.orders .order_img {
	width: 176rpx;
	height: 258rpx;
}

.person {
	padding-left: 10rpx;
	width: 520rpx;
}

.usern {
	font-size: 30rpx;
	color: #656565;
	font-weight: 500;
	padding-top: 8rpx;
	display: flex;
	justify-content: space-between;
}

.richeng {
	display: flex;
	font-size: 22rpx;
	align-items: center;
	color: #979797;
}

.richeng view {
	padding-right: 12rpx;
}

.richeng image {
	width: 9rpx;
	height: 17rpx;
}

.fenshu {
	display: flex;
	align-items: center;
	padding-top: 14rpx;
}

.rates {
	color: #f29423;
	font-size: 26rpx;
	margin-left: 18rpx;
	background-color: #fff6eb;
	padding: 2rpx 10rpx;
	border-radius: 20rpx;
}

.style {
	padding-top: 8rpx;
	font-size: 22rpx;
	color: #3f3f3f;
	font-weight: 500;
}

.pad {
	padding-left: 18rpx;
}

.foot {
	padding: 4rpx 40rpx 160rpx 40rpx;
	font-family: PingFang SC;
}

.foot_name {
	display: flex;
	justify-content: space-between;
	padding-top: 30rpx;
	font-size: 26rpx;
	font-weight: 500;
}

.lei {
	color: #3f3f3f;
	font-weight: 500;
}

.footer {
	position: fixed;
	z-index: 99;
	bottom: 0;
	width: 100%;
	background: #ffffff;
	opacity: 1;
}

.foot_mon {
	text-align: center;
	padding: 38rpx 54rpx 32rpx 54rpx;
}

.write {
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 22rpx;
}

.write text {
	font-size: 40rpx;
	color: #fca800;
}

.goodAt {
	display: flex;
	flex-wrap: wrap;
	font-size: 22rpx;
	color: #f29423;
}

.leis {
	border: 1px solid #f29423;
	padding: 6rpx 10rpx;
	margin: 12rpx 12rpx 0 0;
	border-radius: 10rpx;
}

.foot_style {
	padding-right: 20rpx;
}

.foot_styles {
	display: flex;
	align-items: center;
}

.foot_styles view {
	padding-right: 20rpx;
}

.foot_styles image {
	width: 14rpx;
	height: 26rpx;
}

.feet {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.feet view {
	width: 384rpx;
	padding-right: 26rpx;
	text-align: right;
}

.feet image {
	width: 14rpx;
	height: 26rpx;
}

.ding {
	margin-top: 22rpx;
	color: #979797;
	font-size: 26rpx;
	line-height: 36rpx;
	display: flex;
}

.shuoming {
	margin-top: 112rpx;
	font-size: 30rpx;
	color: #3f3f3f;
	font-weight: 400;
}
</style>
